var canvas;
var oCanvas = document.getElementById("oCanvas");
//globales
		var cadenaCoord=""; //trazo libre
		var cadenaCirculo ="o";
		var cadenaLinea="$";
		var cadenaCuadrado="C";
		//reutilizables
		var p1,p2,s1,s2; // par de coordenadas/puntos
		var alt=0;
		var anch=0;
		//para evitar repeticiones de almohadilla en codigo
		var almo=0;
		//referencia a div
		var ocanvas1= document.getElementById("oCanvas");
		// para que al cargar no añada un campo vacio a la cadena;
		var bool= 0; 
	// control para suavizar forma
	var control=0;
	var suavizar = 3;
	//pincel
	var anch2=0;
	var alt2=0;
	
CanvasRenderingContext2D.prototype.clearArc = function (x, y, radius, startAngle, endAngle, anticlockwise) {

    this.beginPath();
    this.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    this.clear();
};

CanvasRenderingContext2D.prototype.clear = function () {
    this.save();
    this.globalCompositeOperation = 'destination-out';
    this.fillStyle = 'black';
    this.fill();
    this.restore();
};

; (function ($) {
    $.fn.canvasPaint = function (method) {
		
        if (this.length > 1){
            this.each(function() { $(this).myPlugin(options) });
            return this;
        }

         var TOOLS = {
            "PEN"               : 0,
            "ERASER"            : 1,
            "LINE"              : 2,
            "EMPTY_RECTANGLE"   : 3,
            "RECTANGLE"         : 4,
            "EMPTY_CIRCLE"      : 5,
            "CIRCLE"            : 6,
            "SPRAY"             : 7
        }

        canvas = {
            background: {},
            current: {},
            common: {}
        }

        var state = {
            startDrawX: 0,
            startDrawY: 0,
            drawing: false,
            tool: TOOLS.SPRAY, // uno que no existe, por defecto, para que comience a guardar coordenadas desde la carga de la página
            lineThickness: 1,
            strokeColor: "black",
            fillColor: "black",
            sprayDensity: 5
        }

        var undoHistory = []
        var redoHistory = []

        var defaults = {
            maxUndoHistory: 10
        }

        var settings = {}
////////////////////////////////////////////

		
		//funcion para pillar coodenadas lapiz,
		function coordInter(e){
			
		if (control==suavizar){	// para suavizar forma
			
			var hor= e.layerX; // -10 porq el cursor apunta en su centro no en la punta
			var ver=(e.layerY);
			//document.getElementById("coord").innerHTML=hor+","+ver;
			
			
			if (state.tool==TOOLS.PEN){

					//interpolacion javapaint
					if(alt!=0 && anch!=0){ // si no hay punto anterior...
								var xabs = Math.abs (anch - hor);
								var yabs = Math.abs(alt - ver);
								var xdiff = hor - anch;
								var ydiff = ver - alt;
								
								var length = Math.sqrt((Math.pow(xabs, 2) + Math.pow(yabs,2)));
								var steps = length;
								var xstep= xdiff /steps;
								var ystep = ydiff / steps;
							
								var newx = 0;
								var newy = 0;
								
								for (s=0; s<steps; s++){
									newx = anch + (xstep*s);
									newy = alt + (ystep*s);
									//alert(Math.round(newy)+","+Math.round(newx));
									codigoURLCoord (Math.round(newy),Math.round(newx));
								}
								
								//
							}
					anch=hor;
					alt=ver;
	
			}
			
									//reiniciaizar a 0
				control=0;
			}else{
				control++;
			}
		}

/////////////////////		

		function codigoURLEementos (x1,y1,x2,y2){
			// por defecto envía dos coordenadas, pero el java para crear el objeto tipo circulo o cuadrado, necesita: coordenada inicial,
			//, y aumento (diferencia entre primer punto izquierdo superior al segundo punto de marco inferior derecha)
			//alert("coordenadas"+x1+","+y1+","+x2+","+y2);
			//alert("elem");
			
			// teniendo en cuenta las direcciones en las que se dibuja
	
			switch(state.tool) {
                    case TOOLS.EMPTY_CIRCLE:  
						/// como en javascript el dibujo del circulo se hace desde el centro, hay q restarle la distancia a la primera coordenada
						/// y el diametro será el doble, para enviar los parametros correctos al objeto Rectangle de java 
						
						//var p1= (x1-(x2-x1));
						//var cadPuntos= x1+","+y1-Math.abs(y2-y1)+";"+Math.abs(x2-x1)+","+Math.abs(y2-y1)+";";
						var cadPuntos= (x1-Math.abs(x2-x1))+","+(y1-Math.abs(y2-y1))+";"+(Math.abs(x2-x1)*2) +","+(Math.abs(y2-y1)*2)+";";
						cadenaCirculo+=cadPuntos;
						
						break;                 
                    case TOOLS.EMPTY_RECTANGLE:
						if (x2>x1 && y2>y1)// si se dibuja de manera descendente a la derecha
							var cadPuntos= x1+","+y1+";"+(x2-x1)+","+(y2-y1)+";"; //// para dar parametros correctos al constructor
						else if (x2>x1 && y1>y2)
							var cadPuntos= x1+","+y1+";"+(x2-x1)+","+(y1-y2)+";";
						else if (x1>x2 && y2>y1)
							var cadPuntos= x1+","+y1+";"+(x1-x2)+","+(y2-y1)+";";
						else // para evitar negativos
							var cadPuntos= x1+","+y1+";"+(x2+x1)+","+(y1-y2)+";";
						cadenaCuadrado+=cadPuntos;
						break;
                    case TOOLS.LINE:
					// como en linea n se trata de coger primera coordenada más incremento, si no dos coordenadas, se envía informacióndiferente
						if (x2>x1 && y2>y1)
							var cadPuntosLinea= x1+","+y1+";"+x2+","+y2+";"; //// para enviar valores reales de coordenadas
						else // para evitar negativos
							var cadPuntosLinea= x2+","+y2+";"+x1+","+y1+";";
						cadenaLinea+=cadPuntosLinea;
						break;
				}
				//cadenaLinea+=cadPuntos;
				//alert("resultadoElemento"+cadenaLinea);
		}
		
		function codigoURLCoord (x1,y1){
			cadenaCoord+=(x1)+","+(y1)+";"; // margen superior
			
		}

///////////////////////////////////////////////////

// cuando mousedown
        var drawStart = function (event) {
                event.preventDefault();

                // Store the current x, y positions
                state.startDrawX = event.pageX - $(canvas.current.canvas).offset().left;
                state.startDrawY = event.pageY - $(canvas.current.canvas).offset().top;

                // Ponemos el color en el contexto
                canvas.current.context.lineWidth = state.lineThickness;
                
				
                switch(state.tool)
                {
                    case TOOLS.EMPTY_CIRCLE:
  							break;
                    case TOOLS.EMPTY_RECTANGLE:
					break;
                    case TOOLS.LINE:
                        canvas.current.context.fillStyle = state.fillColor;
                        canvas.current.context.strokeStyle = state.strokeColor;
                        break;
                   case TOOLS.PEN:
				   		break;
                }
                state.drawing = true;
         }
        
        var draw = function (event) {
            // Calculate the current mouse X, Y coordinates with canvas offset
            var x = event.pageX - $(canvas.current.canvas).offset().left;
            var y = event.pageY - $(canvas.current.canvas).offset().top;

            // If the mouse is down (drawning) then start drawing lines
            if (state.drawing) {
                switch(state.tool)
                {
                    /*
                        * CIRCULOS
                        */
                    case TOOLS.EMPTY_CIRCLE:
					
						//accionar lctura de coordenada inicial y final(javascript)
					
                        // Limpio la pantalla
                        canvas.current.context.clearRect(0, 0, canvas.common.width, canvas.common.height);

                        // Comienzo el trazo
                        canvas.current.context.beginPath();

                        var radiusX = Math.max(x - state.startDrawX, state.startDrawX - x);
                        var radiusY = Math.max(y - state.startDrawY, state.startDrawY - y);
                        var centerX = state.startDrawX;
                        var centerY = state.startDrawY;

                        canvas.current.context.arc(centerX, centerY, Math.max(radiusX, radiusY), 2 * Math.PI, false);
                        canvas.current.context.stroke();
                        break;
                    	/*
                        * RECTANGULOS
                        */
                    case TOOLS.EMPTY_RECTANGLE:
                        // Limpio la pantalla
                        canvas.current.context.clearRect(0, 0, canvas.common.width, canvas.common.height);

                        var x1 = state.startDrawX;
                        var y1 = state.startDrawY;
                        var x2 = x - state.startDrawX;
                        var y2 = y - state.startDrawY;

                        canvas.current.context.strokeRect(x1, y1, x2, y2);
                        if (state.tool != TOOLS.EMPTY_RECTANGLE)
                            canvas.current.context.fillRect(x1, y1, x2, y2);
                        break;

                    /*
                        * LINEA
                        */
                    case TOOLS.LINE:
                        // Limpio la pantalla
                        canvas.current.context.clearRect(0, 0, canvas.common.width, canvas.common.height);
                        // Comienzo el trazo
                        canvas.current.context.beginPath();
						
						
						//Linea de un pixel y añadido el "antialising"
						canvas.current.context.lineWidth = 1;
						
                        
						canvas.current.context.moveTo(state.startDrawX, state.startDrawY);
                        canvas.current.context.lineTo(x, y);
                        canvas.current.context.stroke();
                        break;

                    /*
                        * LAPIZ
                        */
                    case TOOLS.PEN:
                    	 // Comienzo el trazo
                        canvas.current.context.beginPath();


					//interpolacion 
							if(alt2!=0 && anch2!=0){ // si no hay punto anterior...
								var xabs = Math.abs (anch2 - x);
								var yabs = Math.abs(alt2 - y);
								var xdiff = x - anch2;
								var ydiff = y - alt2;
								
								var length = Math.sqrt((Math.pow(xabs, 2) + Math.pow(yabs,2)));
								var steps = length;
								var xstep= xdiff /steps;
								var ystep = ydiff / steps;
							
								var newx = 0;
								var newy = 0;
								
								for (s=0; s<steps; s++){
									newx = anch2 + (xstep*s);
									newy = alt2 + (ystep*s);
									canvas.current.context.arc(newx, newy, state.lineThickness, 1,  2 * Math.PI, false);
									//canvas.current.context.lineTo(newx, newy);
									canvas.current.context.fill();
								}
								
								//
							}
						anch2=x;
						alt2=y;
                        break;
                }                    

            } else {
                // No estoy pintando   
            }
        }
/// cuando mouse up

        var drawEnd = function (event) {
            if (state.drawing) {
            	
            	anch2=0;
				alt2=0;
            	
            	
                state.drawing = false;

                // Guardo el estado en la pila de historia
                undoHistory.push(canvas.background.context.getImageData(0, 0, canvas.common.width, canvas.common.height));
                if (undoHistory.length > settings.maxUndoHistory)
                    undoHistory.shift(); // Saco el primero
                //undoHistory.push(canvas.background.canvas.toDataURL("image/png"));

                // Mezclo
                canvas.background.context.drawImage(canvas.current.canvas, 0, 0);

                // Limpio la pantalla
                canvas.current.context.clearRect(0, 0, canvas.common.width, canvas.common.height);

			
			/*	 switch(state.tool){
                   case TOOLS.PEN:
				   		cadenaCoord+="#";
						break;
                }*/
            }
      }

        // Necesito saber si tiene soporte nativo
        var nativeSupport = function () {
            var el = document.createElement('canvas');
            return el.getContext != undefined;
        }
		
		
        // inicializador del canvas
        this.initialize = function (options) {
            settings = $.extend({}, defaults, options)

            // Primero ponerlo como posición relativa
            $(this).css("position", "relative");

            // He de crear 2 canvas. Uno es el fondo con el dibujo resultante y
            // otro está encima con lo que se está pintando en el momento
            canvas.common.width = $(this).width();
            canvas.common.height = $(this).height();
            canvas.common.container = this;

            canvas.background.canvas = document.createElement('canvas');
            $(canvas.background.canvas).attr("width", canvas.common.width);
            $(canvas.background.canvas).attr("height", canvas.common.height);
            $(canvas.background.canvas).css("position", "absolute");
            $(canvas.background.canvas).css("top", "0px");
            $(canvas.background.canvas).css("left", "0px");
            $(canvas.background.canvas).css("zIndex", 0);

            canvas.current.canvas = document.createElement('canvas');
            $(canvas.current.canvas).attr("width", canvas.common.width);
            $(canvas.current.canvas).attr("height", canvas.common.height);
            $(canvas.current.canvas).css("position", "absolute");
            $(canvas.current.canvas).css("top", "0px");
            $(canvas.current.canvas).css("left", "0px");
            $(canvas.current.canvas).css("zIndex", 1);

            $(this).append(canvas.background.canvas);
            $(this).append(canvas.current.canvas);

            /* Usando FlashCanvas para compatibilidad con IE8 e IE7 */
            if (typeof FlashCanvas != "undefined") {
                FlashCanvas.initElement(canvas.background.canvas);
                FlashCanvas.initElement(canvas.current.canvas);
            }

            // Iniciar contexto 2D
            canvas.background.context = canvas.background.canvas.getContext('2d');
            canvas.current.context = canvas.current.canvas.getContext('2d');

			//reducir línea a 1 pixel ( por defecto canvas hace grosor de 2)
			canvas.current.context.translate(0.5, 0.5);







////////////////////EVENTOS RATÓN

            $(canvas.current.canvas).bind('mousedown', drawStart);
            $(canvas.current.canvas).bind('mousemove', draw);
            $(canvas.current.canvas).bind('mouseup', drawEnd);
			
			//javascript, coordenadas
			document.getElementById("oCanvas").addEventListener('mousedown',coordInicial);
			
			document.getElementById("oCanvas").addEventListener('mouseup',coordFinal);
			
			function coordInicial(event){
				
				document.getElementById("oCanvas").addEventListener('mousemove',coordInter);// pra trazo
				
				p1= event.layerX; //
				p2= (event.layerY);//-;
				//alert(p2);
			}
			
			function coordFinal(event){
				
				anch=0;// punto 1, x
				alt=0;
				
				document.getElementById("oCanvas").removeEventListener('mousemove',coordInter);
				
				s1= (event.layerX); 
				s2= (event.layerY);//-62; 
				//alert(p1+","+p2+","+s1+","+s2);
				codigoURLEementos (p1,p2,s1,s2);// plasmar datos del elemento en al codigo
				//alert(p1,p2,s1,s2)
			}
			
            $(canvas.current.canvas).bind('mouseleave', function () {
                    //ASPNETPaint.context.putImageData(ASPNETPaint.state.oldState, 0, 0);
            });
            $('body').bind('mouseup', drawEnd);
            
            return this;
        }

		//cambios d estado de herramientas
        this.activatePen = function () { state.tool = TOOLS.PEN; }
        this.activateEraser = function () { state.tool = TOOLS.ERASER; }
        this.activateEmptyCircle = function () { state.tool = TOOLS.EMPTY_CIRCLE; }
        this.activateCircle = function () { state.tool = TOOLS.CIRCLE; }
        this.activateEmptyRectangle = function () { state.tool = TOOLS.EMPTY_RECTANGLE; }
        this.activateRectangle = function () { state.tool = TOOLS.RECTANGLE; }
        this.activateLine = function () { state.tool = TOOLS.LINE; }
        this.activateSpray = function () { state.tool = TOOLS.SPRAY; }

        this.undo = function () {
            //If we have some restore points
            if (undoHistory.length > 0) {
                redoHistory.unshift(canvas.background.context.getImageData(0, 0, canvas.common.width, canvas.common.height));
                canvas.background.context.putImageData(undoHistory.pop(), 0, 0);                
                if (redoHistory.length > settings.maxUndoHistory)
                    redoHistory.pop();
                
            }
        }

        this.redo = function () {
            if (redoHistory.length > 0) {
                undoHistory.push(canvas.background.context.getImageData(0, 0, canvas.common.width, canvas.common.height));
                canvas.background.context.putImageData(redoHistory.shift(), 0, 0);                
                if (undoHistory.length > settings.maxUndoHistory)
                    undoHistory.unshift();
            }
        }
        this.changeStrokeColor = function (color) {
            state.strokeColor = color;
        }

        this.changeStrokeSize = function (size) {
            state.lineThickness = size
        }


        this.clearAll = function () {
            canvas.background.context.clearRect ( 0 , 0 , canvas.common.width , canvas.common.height );
            canvas.current.context.clearRect ( 0 , 0 , canvas.common.width , canvas.common.height );
            $(canvas.common.container).css("backgroundImage", "none");
        }

        this.changeOpacity = function (opacity) {
            canvas.current.context.globalAlpha = opacity / 100;
        }        
        
        return this.initialize();
    }

})(jQuery);// JavaScript Document


//////////////////////ENVIO

			///Parte para enviar
			
		function envia(){
			
			if(window.XMLHttpRequest) {    
				peticion_http = new XMLHttpRequest();  
			 }  else if(window.ActiveXObject) {    
				peticion_http = new ActiveXObject("Microsoft.XMLHTTP");  
			 }   // Preparar la funcion de respuesta  
			  peticion_http.onreadystatechange = enviaImatge; 
			  // Realizar peticion HTTP  
			 peticion_http.open('POST', 'servlet', true); 
			 peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

			//var cad = Canvas2Image.saveAsBMP(canvas.background.canvas, true); 
			//alert(cad);
			//var cad64= toBase64(cad);
			
			//if (almo==0){
				//cadenaCoord+="#";
				//almo=1;
			//}
			//alert("coord"+x1+y1);
			 // añadir separador
			 //alert(cadenaCoord);
			 
			 // # indica final de trazo libre, @ indica final de la cadena
			cadJunta= cadenaCoord+"#"+ cadenaCirculo+cadenaLinea+cadenaCuadrado+"@";
			//peticion_http.send("imatge2="+cad64);
			
			//cadJunta="$";
			//alert(cadJunta);
			peticion_http.send("imatge2="+cadJunta);
			
			//reiniciar pantalla y variables
		}
		function enviaImatge(){
			if(peticion_http.readyState == 4) {      
					if(peticion_http.status == 200) {  
						var respuesta = peticion_http.responseText;
						//alert(peticion_http.responseText);
						var campos = respuesta.split(";");
						
						if(campos.length>1)
							document.getElementById("texto").innerHTML="<h3>Nombre</h3> " + campos[0] + "<br><h3>Definici&oacute;n</h3>"+ campos[1] + "<br><h3>Descripci&oacute;n</h3>" + campos[2]  + "<br> <h3>Imagen</h3> <img width=100px alt='imatge' src=" + campos[3] +"/>";
						else
							document.getElementById("texto").innerHTML="S&iacute;mbolo no encontrado, por favor, vuelva a intentarlo si no se encuentra de nuevo, p&oacute;ngase en contacto con nosotros e insertaremos el s&iacute;mbolo en nuestra base de datos";
					}
			}
		}
		
		
//		function buscadorInversa(){
//				
//				if(window.XMLHttpRequest) {    
//					peticion_http = new XMLHttpRequest();  
//				 }  else if(window.ActiveXObject) {    
//					peticion_http = new ActiveXObject("Microsoft.XMLHTTP");  
//				 }   // Preparar la funcion de respuesta  
//				  peticion_http.onreadystatechange = enviaImatge; 
//				  // Realizar peticion HTTP  
//				 peticion_http.open('POST', 'http://localhost:8080/Creacion_ServletPreguntaPinta/servlet', true); 
//				 peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//				 
//				
//				//alert(document.getElementById("nombreSimbolo").value);
//				peticion_http.send("nombre="+encodeURIComponent(document.getElementById("nombreSimbolo").value));
//				
//				//reiniciar pantalla y variables
//		}
//		
//		